<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
	<title>Taco Cloud</title>
	<link rel="stylesheet" th:href="@{/styles.css}" />
</head>

<body>
<h1>Design your taco!</h1>
<img th:src="@{/images/taco-cloud.png}"/>
<form method="POST" th:object="${design}">
	<div class="grid">
		<div class="ingredient-group" id="wraps">
			<h3>Designate your wrap:</h3>
			<div th:each="ingredient : ${wrap}">
				<input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
				<span th:text="${ingredient.name}">INGREDIENT</span><br/>
			</div>
		</div>
		<div class="ingredient-group" id="proteins">
			<h3>Pick your protein:</h3>
			<div th:each="ingredient : ${protein}">
				<input name="ingredients" type="checkbox" th:value="${ingredient.id}" />
				<span th:text="${ingredient.name}">INGREDIENT</span><br/>
			</div>
		</div>
		<div class="ingredient-group" id="cheeses">
			<h3>Choose your cheese:</h3>
			<div th:each="ingredient : ${cheese}">
				<input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
				<span th:text="${ingredient.name}">INGREDIENT</span><br/>
			</div>
		</div>
		<div class="ingredient-group" id="veggies">
			<h3>Determine your veggies:</h3>
			<div th:each="ingredient : ${veggies}">
				<input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
				<span th:text="${ingredient.name}">INGREDIENT</span><br/>
			</div>
		</div>
		<div class="ingredient-group" id="sauces">
			<h3>Select your sauce:</h3>
			<div th:each="ingredient : ${sauce}">
				<input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
				<span th:text="${ingredient.name}">INGREDIENT</span><br/>
			</div>
		</div>
	</div>
	<div>
		<h3>Name your taco creation:</h3>
		<input type="text" th:field="*{name}"/><br/>
		<button>Submit your taco</button>
	</div>
</form>
</body>
</html>